<template>
  <div style="width: 60%; min-height: 600px; margin: 20px auto">
    <div class="card" style="margin-bottom: 5px;">
      <el-input v-model="data.username" prefix-icon="Search" style="width: 240px; margin-right: 10px" placeholder="请输入用户账号查询"></el-input>
      <el-button type="info" plain @click="load">查询</el-button>
      <el-button type="warning" plain style="margin: 0 10px" @click="reset">重置</el-button>
    </div>

    <div style="margin-top: 20px" v-if="data.tableData?.length !== 0">
      <div style="display: flex; align-items: center; grid-gap: 20px" v-for="item in data.tableData" :key="item.id" class="card">
        <img alt="" :src="item.avatar" style="width: 60px; height: 60px; border-radius: 30px"/>
        <div style="font-size: 18px"><span style="color: #666666">名称：</span> {{item.name}}</div>
        <div style="font-size: 18px"><span style="color: #666666">账号：</span>{{item.username}}</div>
        <div style="flex: 1; text-align: right">
          <el-button type="primary" round :disabled="data.user.id === item.id" @click="showFriendApply(item)">加好友</el-button>
        </div>
      </div>
    </div>
    <div style="margin-top: 20px" v-else>
      <div class="card" style="font-size: 24px; color: #8c939d" v-if="data.username !== null">......未找到账号为该找的用户</div>
      <div class="card" style="font-size: 24px; color: #8c939d" v-else>......暂未搜索</div>
    </div>
    <el-dialog v-model="data.formVisible" title="申请信息" width="40%" destroy-on-close>
      <el-form ref="formRef" :model="data.form" label-width="70px" style="padding: 20px">
        <el-form-item prop="reasonText" label="申请理由" >
          <el-input v-model="data.form.reasonText" type="textarea" rows="4" placeholder="请输入申请理由"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="data.formVisible = false">取消</el-button>
        <el-button type="primary" @click="add">保存</el-button>
      </span>
      </template>
    </el-dialog>

  </div>
</template>

<script setup>
import {reactive} from "vue"
import request from "@/utils/request";
import {ElMessage, ElMessageBox} from "element-plus";
import {Delete, Edit} from "@element-plus/icons-vue";
const baseUrl = import.meta.env.VITE_BASE_URL

const data = reactive({
  user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
  tableData: [],
  formVisible: false,
  form: {},
  username: null,
})

// 加载表格数据
const load = () => {
  request.get('/user/selectAll', {
    params: {
      username: data.username
    }
  }).then(res => {
    if (res.code === '200') {
      data.tableData = res.data
    } else {
      ElMessage.error(res.msg)
    }

  })
}
load()

// 打开编辑弹窗
const showFriendApply = (row) => {
  data.form.applyUserId = row.id
  data.formVisible = true
}

// 新增
const add = () => {
  request.post('/friendApply/add', data.form).then(res => {
    if (res.code === '200') {
      ElMessage.success('操作成功')
      data.formVisible = false
      load()
    } else {
      ElMessage.error(res.msg)
    }
  })
}

// 搜索重置
const reset = () => {
  data.username = null
  data.tableData = []
}


</script>